<template>
  <el-dialog
    title="详情"
    :visible.sync="centerDialogVisible"
    width="40%"
    >
    <table border="0" cellspacing="0" cellpadding="0" class="look-table" style="font-size:17px;border-top: solid 1px #F0F0F0;margin-top: 5px;" >
      <tr v-for="param in dialogParam.items">
        <td style="width:100px"> {{param.label}}</td>
        <td style="width:400px">
          <div v-if="param.formatter" >
            <span v-for="fp in param.formatter" :key="fp.prop" v-if="fp.prop == currentRow[param.prop]"> {{fp.label}}</span>
        </div>

        <div v-else style="width:400px;word-wrap:break-word">{{currentRow[param.prop]}}</div></td>
      </tr>
    </table>
  </el-dialog>
</template>
<style scoped>

  .look-table{
    border-collapse:collapse;
    width:100%;
  }
  .look-table > tr{
    border-bottom:1px solid #f0f0f0;
    height:50px;
  }
  .look-table > tr:nth-child(2n-1){
    border-bottom: 1px solid #f0f0f0;
    height: 50px;
    background: #FDFDFD
  }
  .look-table > tr > td:nth-child(2n-1){
    text-align: right;
    width: 10%;
    font-weight: bold;
  }
  .look-table > tr > td:nth-child(2n){
    padding-left: 20px;
  }
</style>
<script>
  import {yfuPost} from '@/utils/request.js'
  export default {
    props: ['dialogParam'],
    data () {
      return {
        centerDialogVisible: false,
        currentRow: {}
      }
    },
    methods: {
      openDialog (row) {
        let cThis = this
        yfuPost(process.env.BASE_API, this.dialogParam.url, {id: row.id}, function (data) {
          cThis.currentRow = data
          console.log(data)
        })
        this.centerDialogVisible = true
      },
      closeDialog () {
        this.centerDialogVisible = false
      }
    }
  }
</script>
